<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>申请管理</el-breadcrumb-item>
                <el-breadcrumb-item>佣金申请列表</el-breadcrumb-item>
            </el-breadcrumb>

            <div class="handleBox">
                <div>
                    <span>施工员：</span><el-select v-model="selectSaleUserId" placeholder="请选择" @change="getlist"
                        size="small">
                        <el-option v-for="item in saleUserList" :key="item.userId" :label="item.userName"
                            :value="item.userId">
                        </el-option>
                    </el-select>
                </div>
                <div>
                    <span>状态：</span><el-select v-model="selectStatus" placeholder="请选择" @change="getlist" size="small">
                        <el-option v-for="item in statusList" :key="item.value" :label="item.text" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <!-- <el-button size="mini" @click="updataHandle(1)">审核</el-button>
                <el-button size="mini" @click="updataHandle(2)">驳回</el-button> -->
            </div>

            <el-table :data="tableList" border style="width: 100%" height="610"
                :header-cell-style="{ background: '#409EFF', color: '#FFF' }">
                <el-table-column prop="userId" label="ID" width="110"></el-table-column>
                <el-table-column prop="userName" label="施工员" width="110"></el-table-column>
                <el-table-column prop="applyDate" label="申请时间"></el-table-column>
                <el-table-column prop="applyMoney" label="申请金额"></el-table-column>
                <el-table-column label="状态" >
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.applyStatus == 1">已审核</el-tag>
                        <el-tag v-if="scope.row.applyStatus == 0">未审核</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="sendHandle(scope.row)">发放佣金</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paginationBox">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNum" :page-sizes="[20, 30, 50]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>

            <el-dialog title="驳回" :visible.sync="auditReject" width="600px">
                <el-form :model="record" ref="oilform">
                    <el-form-item label="驳回原因">
                        <el-input v-model="record.message" placeholder="请输入驳回原因"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="auditReject = false">取 消</el-button>
                    <el-button type="primary" @click="sumbitReturnRecord()">确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>
<script>
import { getSaleUser, listCommission, passCommission } from '../../network/preparer'
export default {
    name: 'couInfo',
    data() {
        return {
            tableList: [],
            statusList: [
                {
                    value: '',
                    text: '全部'
                },
                {
                    value: 0,
                    text: '未审核'
                },
                {
                    value: 1,
                    text: '已审核'
                },
                // {
                //     value: 2,
                //     text: '已驳回'
                // }
            ],
            selectStatus: '',
            selectRecord: '',
            saleUserList: [],//施工员列表
            selectSaleUserId: '',
            checkList: [],
            pageNum: 1,
            pageSize: 20,
            total: 0,
            auditReject: false,
            record: {
                message: ''
            },
        }
    },
    created() {
        this.getlist()
        this.getSaleUser()
    },
    methods: {

        // 审核
        sendHandle(obj) {

            this.$confirm('是否已发放佣金?请谨慎操作', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                console.log(obj);
                passCommission({
                    applyId: obj.applyId,
                }).then(res => {
                    if (res.flag) {
                        this.$message.success('操作成功')
                        this.getlist()
                    } else {
                        this.$message.warning('操作失败，请重试')
                    }
                })


            }).catch(() => {
            });


        },


        handleSelectionChange(val) {
            this.ids = ''
            val.forEach(ele => {
                this.ids += ele.visitId + ','
            })
        },

        // 获取佣金申请列表
        getlist() {
            listCommission({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                userId: this.selectSaleUserId,
                applySataus: this.selectStatus,
            }).then(res => {
                if (res.flag) {
                    this.tableList = res.data.list
                    this.total = res.data.total
                }
            })
        },

        handleSizeChange(val) {
            this.pageSize = val
            this.getlist()
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.getlist()
        },




        getSaleUser() {
            getSaleUser({
                companyId: 0,
                flag: 1  //  0 进销存查询人员  1 广告牌查询人员
            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    this.saleUserList = res.data.filter(item => {
                        return item.userTag == -3
                    })

                    this.saleUserList.unshift({
                        userId: '',
                        userName: '全部',
                    })
                }
            })
        },


    },
}
</script>

<style lang="less" scoped>
.handleBox {
    display: flex;
    align-items: center;
    margin: 15px 0;
}

.handleBox>div {
    margin-right: 16px;
}

.image-control {
    display: block;
    border-radius: 8px;
    width: 100px;
    height: 100px;
    background-color: #fafafa;
}

.paginationBox {
    margin-top: 30px;
    display: flex;
    justify-content: end;
}
</style>